<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('留言互动')"/>
	<style>
		html,
		body {
			background-color: #f0f2fa;
			font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
			color: #555f77;
			-webkit-font-smoothing: antialiased;
		}

		input,
		textarea {
			outline: none;
			border: none;
			display: block;
			margin: 0;
			padding: 0;
			-webkit-font-smoothing: antialiased;
			font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
			font-size: 1rem;
			color: #555f77;
		}

		input::-webkit-input-placeholder,
		textarea::-webkit-input-placeholder {
			color: #ced2db;
		}

		input::-moz-placeholder,
		textarea::-moz-placeholder {
			color: #ced2db;
		}

		input:-moz-placeholder,
		textarea:-moz-placeholder {
			color: #ced2db;
		}

		input:-ms-input-placeholder,
		textarea:-ms-input-placeholder {
			color: #ced2db;
		}

		p {
			line-height: 1.3125rem;
		}

		.comments {
			margin: 2.5rem auto 0;
			max-width: 60.75rem;
			padding: 0 1.25rem;
		}

		.comment-wrap {
			margin-bottom: 1.25rem;
			display: table;
			width: 100%;
			min-height: 5.3125rem;
		}

		.photo {
			padding-top: 0.625rem;
			display: table-cell;
			width: 3.5rem;
		}

		.photo .avatar {
			height: 2.25rem;
			width: 2.25rem;
			border-radius: 50%;
			background-size: contain;
		}

		.comment-block {
			padding: 1rem;
			background-color: #fff;
			display: table-cell;
			vertical-align: top;
			border-radius: 0.1875rem;
			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
		}

		.comment-block textarea {
			width: 100%;
			max-width: 100%;
		}

		.comment-text {
			margin-bottom: 1.25rem;
		}

		.bottom-comment {
			color: #acb4c2;
			font-size: 0.875rem;
		}

		.comment-date {
			float: left;
		}

		.comment-actions {
			float: right;
		}

		.comment-actions li {
			display: inline;
		}

		.comment-actions li.complain {
			padding-right: 0.625rem;
			border-right: 1px solid #e1e5eb;
		}

		.comment-actions li.reply {
			padding-left: 0.625rem;
		}
	</style>
</head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<!--			<div class="col-sm-10 search-collapse">-->
			<!--				<form id="search-active" class="search-active">-->
			<!--					<div class="select-list">-->
			<!--						<ul>-->
			<!--							<li>-->
			<!--								<label>评论标题：</label>-->
			<!--								<input type="text" name="commentsTitle"/>-->
			<!--							</li>-->
			<!--							<li>-->
			<!--								<label>评论类型：</label>-->
			<!--								<select name="commentsType" th:with="type=${@dict.getType('sys_comments_type')}">-->
			<!--									<option value="">所有</option>-->
			<!--									<option th:each="dict : ${type}" th:text="${dict.dictLabel}"-->
			<!--									        th:value="${dict.dictValue}"></option>-->
			<!--								</select>-->
			<!--							</li>-->
			<!--							<li>-->
			<!--								<label>评论内容：</label>-->
			<!--								<input type="text" name="commentsContent"/>-->
			<!--							</li>-->
			<!--							<li>-->
			<!--								<label>评论状态：</label>-->
			<!--								<select name="status" th:with="type=${@dict.getType('sys_news_status')}">-->
			<!--									<option value="">所有</option>-->
			<!--									<option th:each="dict : ${type}" th:text="${dict.dictLabel}"-->
			<!--									        th:value="${dict.dictValue}"></option>-->
			<!--								</select>-->
			<!--							</li>-->
			<!--							<li>-->
			<!--								<button onclick="startSearch()"><a class="btn btn-primary btn-rounded btn-sm"><i-->
			<!--									class="fa fa-search"></i>&nbsp;搜索</a></button>-->

			<!--								<button><a class="btn btn-warning btn-rounded btn-sm"-->
			<!--								           href="/party-platform/admin/comments/start"><i-->
			<!--									class="fa fa-refresh"></i>&nbsp;重置</a></button>-->
			<!--							</li>-->
			<!--						</ul>-->
			<!--					</div>-->
			<!--				</form>-->
			<!--			</div>-->

			<div class="col-sm-12 select-table table-striped">
				<div class="comment-wrap active">
					<div class="comment-block">
						<form action="">
							<textarea name="" id="" cols="30" rows="3" placeholder="Say somthing..."></textarea>
						</form>
						<h4><a class="btn btn-success" onclick="$.operate.add()"
						       shiro:hasPermission="admin:comments:add">
							<i class="fa fa-plus"></i> 发表评论
						</a></h4>
					</div>
				</div>

				<div th:each="item,iterStat : ${comments}">
					<div class="comment-wrap">
						<div class="comment-block">
							<h5 class="comment-text" th:text="'创建者：'+${{item.updateBy}}"></h5>
							<option class="form-control m-b" th:text="${{item.commentsTitle}}"></option>
							<p class="comment-text" th:text="${{item.commentsContent}}">Lorem ipsum dolor sit amet,
							</p>
							<h5 th:if="${not #strings.isEmpty(item.toName)}" class="comment-text"
							    th:text="${{item.fromName}}+ '回复：'+${{item.toName}}"></h5>
							<div class="bottom-comment">
								<div class="comment-date" th:text="${{item.createTime}}">23.5 2014</div>
								<ul class="comment-actions">

								</ul>
							</div>
							<form class="form-group reply-active" id="reply-active" th:id="${{item.commentsId}}"
							      th:classappend="${{item.commentsId}}+'reply-active'"
							      action="party-platform/admin/comments/reply"
							      method="post">
								<div class="form-group">
									<input name="commentsContent" class="form-control" type="text"
									       th:id="${{item.commentsId}}+ 'commentsContent'"
									       required>
									<input name="test" type="text" id="test">
								</div>
								<input name="commentsTitle" class="form-control" type="hidden"
								       th:value="${{item.commentsTitle}}">
								<input name="commentsId" class="form-control" type="hidden"
								       th:value="${{item.commentsId}}">
								<input name="commentsToId" type="hidden" th:value="${{item.commentsFromId}}">

								<h6>
									<button class="btn btn-success" th:onclick="|reply('${item.commentsId}')|"
									        type="submit"
									        shiro:hasPermission="admin:comments:add">
										<i class="fa fa-plus"></i> 回复
									</button>
									<!-- 按钮触发模态框 -->
								</h6>
							</form>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>


	</div>
	<th:block th:include="include :: footer"/>
	<script th:inline="javascript">
		var editFlag = [[${@permission.hasPermi('admin:comments:edit')}]];
		var removeFlag = [[${@permission.hasPermi('admin:comments:remove')}]];
		var commentsTypeDatas = [[${@dict.getType('sys_comments_type')}]];
		var statusDatas = [[${@dict.getType('sys_news_status')}]];
		var prefix = ctx + "admin/comments";

		//serialize form data
		function serializeFormData($form) {
			let unindexed_array = $form.serializeArray();
			let indexed_array = {};

			$.map(unindexed_array, function (n, i) {
				indexed_array[n['name']] = n['value'];
			});

			return JSON.stringify(indexed_array);
		}

		$(document).ready(function () {

			$('.reply-active').submit(function (e) {
				// 阻止默认提交
				e.preventDefault();
				// $.operate.save(prefix + "/reply", $('#reply-active').serialize());
				// reply(commentsFromId);
			});

			$('.search-active').submit(function (e) {
				// 阻止默认提交
				e.preventDefault();
				$.operate.post(prefix + "/startSearch", $('#search-active').serialize());
			});


		});

		function reply(commentsFromId) {
			let data = serializeFormData($('.' + commentsFromId + 'reply-active'));
			console.log(data);
			if (data === "") {
				$.modal.alertWarning("评论内容不能为空");
				return;
			}
			$.operate.post(prefix + "/reply", $('.' + commentsFromId + 'reply-active').serialize());
		}

		function reset() {
			$.operate.get(prefix + "/start", "成功");
		}

		$(function () {
			var options = {
				url: prefix + "/list",
				createUrl: prefix + "/addBasePage",
				updateUrl: prefix + "/edit/{id}",
				removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
				modalName: "留言板评论互动",
				pagination: true,
				escape: false,
				columns: [{
					checkbox: true
				},
					{
						field: 'commentsId',
						title: '评论内容主键',
						visible: false
					},
					{
						field: 'commentsTitle',
						title: '评论标题'
					},
					{
						field: 'commentsType',
						title: '评论类型',
						formatter: function (value, row, index) {
							return $.table.selectDictLabel(commentsTypeDatas, value);
						}
					},
					{
						field: 'commentsContent',
						title: '评论内容'
					},
					{
						field: 'commentsToId',
						title: '评论目标用户编号'
					},
					{
						field: 'commentsFromId',
						title: '评论用户编号'
					},
					{
						field: 'fromName',
						title: '回复用户名称'
					},
					{
						field: 'toName',
						title: '评论用户名称'
					},
					{
						field: 'status',
						title: '评论状态',
						formatter: function (value, row, index) {
							return $.table.selectDictLabel(statusDatas, value);
						}
					},
					{
						field: 'remark',
						title: '备注'
					},
					{
						title: '操作',
						align: 'center',
						formatter: function (value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.commentsId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
							actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.commentsId + '\')"><i class="fa fa-remove"></i>删除</a>');
							return actions.join('');
						}
					}]
			};
			$.table.init(options);
		});
	</script>
</body>
</html>